import React from 'react'
import ReactDOM from 'react-dom'
// const obj = {
//   comments: [
//     {
//       id: '1',
//       author: 'jack',
//       content: '沙发!!!'
//     },
//     {
//       id: '2',
//       author: 'make',
//       content: '第一条评论'
//     }
//   ]
// }
// 创建页面结构
// const app = (
//   <div className="page">
//     <div className="thead">
//       <input type="text" placeholder="请输入评论人" />
//     </div>
//     <div className="tbody" style={{ marginTop: 5, marginBottom: 5 }}>
//       <textarea
//         name="content"
//         id="comment"
//         cols="30"
//         rows="10"
//         placeholder="请输入评论内容"></textarea>
//     </div>
//     <button>发表评论</button>
//     <button>清空评论</button>
//     <div className="tfoot">
//       {obj.comments.map((item) => (
//         <ul key={item.id}>
//           <li>{item.author}</li>
//           <p>{item.content}</p>
//           <button>删除</button>
//         </ul>
//       ))}
//     </div>
//   </div>
// )
// 类创建组件
class Element extends React.Component {
  // 定义状态
  state = {
    comments: [
      {
        id: '1',
        author: 'jack',
        content: '沙发!!!'
      },
      {
        id: '2',
        author: 'make',
        content: '第一条评论'
      }
    ]
  }

  render() {
    return (
      <div className="page">
        <div className="thead">
          <input type="text" placeholder="请输入评论人" />
        </div>
        <div className="tbody" style={{ marginTop: 5, marginBottom: 5 }}>
          <textarea
            name="content"
            id="comment"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"></textarea>
        </div>
        <button>发表评论</button>
        <button>清空评论</button>
        <div className="tfoot">
          {this.state.comments.map((item) => (
            <ul key={item.id}>
              <li>{item.author}</li>
              <p>{item.content}</p>
              <button>删除</button>
            </ul>
          ))}
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Element />, document.getElementById('root'))
